<template>
  <div class="data-theme">
    <div class="data-theme-title pt116">
      <div class="main">
          <h3>主题服务</h3>
          <span class="subtitle">工程建设云系统服务主题及业务介绍，可点击各模块查看详情</span>
      </div>
    </div>
    <moduleQuery />
    <ModalAwait v-model:visible="awaitVisible" />
  </div>
</template>

<script lang="ts" >
import { defineComponent, ref } from "vue";
import moduleQuery from "./moduleQuery/index.vue";

export default defineComponent({
  name: "Theme",
  components: { moduleQuery },
  setup() {
    const awaitVisible = ref<boolean>(false);

    const openAwait = () => {
      awaitVisible.value = true;
    };

    return {
      awaitVisible,
      openAwait,
    };
  },
});
</script>

<style lang="less" scoped>
.data-theme {
  background: #f4f6fa;

  .data-theme-title {
    background: url(/src/assets/img/theme_bg.png) no-repeat center/cover;

    .main {
      height: 254px;

      h3 {
        position: relative;
        margin-top: 60px;
        font-size: 36px;
        font-weight: 400;
        line-height: 62px;
        color: white;

      }

      .subtitle {
        display: block;
        width: 649px;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: white;
      }
    }
  }
}
</style>


